<template lang="pug">
.user-manage-role
  el-dialog(title="选择角色" v-model="dialogVisible" @close="handleClose" custom-class="dialog-width")
    el-scrollbar.scrollbar-dialog-wrap
      el-radio-group(v-model="selectId")
        .checkbox-list(v-for="item in state.roleList")
          el-radio(border :label="item.id" :key="item.id") {{item.roleName}}

    .dialog-footer
      el-button(@click="formSubmit" type="primary" size="small" :lodading="loading") 确定
      el-button(@click="handleClose" type="danger" size="small") 取消
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch, defineProps, defineEmit } from 'vue'

const { proxy } = getCurrentInstance()
const emit = defineEmit(['closeFun', 'update:isDialog'])
const props = defineProps({
  isDialog: {
    required: true
  }
})

const state = reactive({
  roleList: []
})
const dialogVisible = ref(false)
const selectId = ref(null)
const loading = ref(false)

// 侦听
watch(() => [props.isDialog], ([newDialog, oldDialog]) => {
  if (!newDialog) return

  dialogVisible.value = newDialog
}, { immediate: true })

getRole()

// 获取角色列表
function getRole () {
  state.roleList = [
    { id: 1, roleName: '管理员' },
    { id: 2, roleName: '技术管理员' }
  ]
}

// 表达提交
function formSubmit () {
  if (!selectId.value) {
    proxy.$message({ type: 'error', message: '请先选择数据' })
    return
  }
  loading.value = true
  proxy.$message({ type: 'success', message: '提交成功' })
  emit('closeFun')
  handleClose()
}

// 关闭弹窗
function handleClose () {
  emit('update:isDialog', false)
  dialogVisible.value = false
}
</script>
<style rel="stylesheet/scss" lang="scss">
  .user-manage-role {
    .checkbox-list {
      margin-top: 10px;
    }
    .dialog-footer {
      margin-top: 20px;
      text-align: right;
    }
  }
</style>
